<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 1.checkbox单选框  boolean类型-->
    <!-- <label for="access">
      <input type="checkbox" id="access" v-model='isAgree'>同意协议
      您选择的是:{{isAgree}}
    </label>
    <button :disabled="!isAgree">下一步</button> -->

    <!-- 2.checkbox多选框 数组类型-->
    <!-- <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    {{hobbies}} -->

    <label :for="item" v-for="item in originHobbies">
      <input type="checkbox" :value="item" v-model="hobbies" :id="item">{{item}}
    </label>
    <div>
      {{hobbies}}
    </div>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isAgree: false,
        hobbies: [],
        originHobbies: ['篮球', '足球', '乒乓球', '羽毛球']
      },
      methods: {}
    });
  </script>
</body>

</html>